<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <el-card class="list">
      <el-row :gutter="24">
        <el-col :span="6">
          订单编号
          <span>{{ list.id }}</span>
        </el-col>
        <el-col
          :span="6"
          style="font-size: 14px"
        >
          运单编号:
          <span>{{ list.transportOrder.id }}</span>
        </el-col>
        <el-col
          :span="6"
          style="font-size: 14px"
        >
          下单时间
          <span>{{ list.estimatedStartTime }}</span>
        </el-col>
        <el-col
          :span="6"
          style="font-size: 16px"
        >
          订单状态
          <span>{{ list.status===22000?'已关闭':(list.status===23000?'待取件':(list.status===23001?'已取件':(list.status===23008?'派送中':list.status===23009?'上门取件':list.status===23010?'拒收':'已取消'))) }}</span>
        </el-col>
        <el-col
          :span="6"
          style="margin-top: 20px; font-size: 14px"
        >
          预计到达日期
          <span> {{ list.estimatedArrivalTime }}</span>
        </el-col>
      </el-row>
    </el-card>
    <!-- 基本信息 -->
    <el-collapse
      class="basic"
    >
      <el-collapse-item
        title="基本信息"
        style="margin-top: 10px"
      >
        <el-timeline>
          <div class="shipper">
            <img
              class="shipperImg"
              src="../../assets/fahuo.png"
              alt=""
            />
            <span>发货方</span>
          </div>
          <div class="style">
            <div class="shipperLeft">
              <div class="shipperName">
                发货方姓名:
                <span>{{ list.senderName }}</span>
              </div>
              <div
                class="shipperProvince"
                style="margin-top: 10px"
              >
                发货方地址:
                <span>{{ list.senderProvince.name }}{{ list.senderCity.name
                }}{{ list.senderCounty.name }}</span>
              </div>
            </div>
            <div class="shipperRigth">
              <div class="shipperPhone">
                发货方电话:
                <span>{{ list.senderPhone }}</span>
              </div>
              <div
                class="shipperAddress"
                style="margin-top: 10px"
              >
                详细地址:
                <span>{{ list.senderAddress }}</span>
              </div>
            </div>
          </div>
        </el-timeline>
        <!-- 收货方 -->
        <el-timeline style="margin-bottom: 20px">
          <div class="shipper">
            <img
              class="shipperImg"
              src="../../assets/shouhuo.png"
              alt=""
            /><img />
            <span>收货方</span>
          </div>
          <div class="style">
            <div class="shipperLeft">
              <div class="shipperName">
                收货方姓名:
                <span>{{ list.receiverName }}</span>
              </div>
              <div
                class="shipperProvince"
                style="margin-top: 10px"
              >
                收货方地址:
                <span>{{ list.receiverProvince.name }}{{ list.receiverCity.name
                }}{{ list.receiverCounty.name }}</span>
              </div>
            </div>
            <div class="shipperRigth">
              <div class="shipperPhone">
                收货方电话:
                <span>{{ list.receiverPhone }}</span>
              </div>
              <div
                class="shipperAddress"
                style="margin-top: 10px"
              >
                详细地址:
                <span>{{ list.receiverAddress }}</span>
              </div>
            </div>
          </div>
        </el-timeline>
        <!-- 距离 -->
        <el-timeline style="margin-bottom: 20px">
          <div class="shipper">
            <img
              class="shipperImg"
              src="../../assets/juli.png"
              alt=""
            /><img />
            <span>距离:{{ list.distance }}km</span>
          </div>
        </el-timeline>
        <!-- 备注 -->
        <el-timeline style="margin-bottom: 40px; margin-left: 19px">
          <div class="shipper">
            <span>备注：{{ list.mark===null?'暂无':list.mark }}</span>
          </div>
        </el-timeline>
      </el-collapse-item>
    </el-collapse>
    <el-collapse style="width:1281px; margin:0 auto;">
      <el-collapse-item
        title="订单轨迹"
        style="margin-top: 10px"
      >
      </el-collapse-item>
    </el-collapse>
    <!-- 取件信息 -->
    <el-collapse
      class="pickupInformation"
    >
      <el-collapse-item
        name="1"
        title="取件信息"
        style="margin-top: 10px; "
      >
        <div class="pickupInformationTop">
          <!--所在网点 -->
          <el-timeline>
            <span>所在网点:{{ list.taskPickup.agency.name }}</span>
          </el-timeline>
          <!-- 取件类型 -->
          <el-timeline>
            <span>取件类型:{{ list.pickupType===0?'上门取件':'网点自取' }}</span>
          </el-timeline>
          <!-- 作业状态 -->
          <el-timeline>
            <span>作业状态:{{ list.taskPickup.status===1 ? '新任务':(list.taskPickup.status=== 2 ? '已完成':'已取消') }}</span>
          </el-timeline>
          <!-- 取件快递员 -->
          <el-timeline>
            <span>取件快递员:{{ list.taskPickup.courier.name }}</span>
          </el-timeline>
        </div>
        <div class="pickupInformationButtom">
          <!-- 快递员电话 -->
          <el-timeline>
            <span>快递员电话:{{ list.taskPickup.courier.mobile }}</span>
          </el-timeline>
          <!-- 预计取件时间 -->
          <el-timeline>
            <span style="margin-left:145px;">预计取件时间:{{ list.estimatedStartTime }}</span>
          </el-timeline>
          <!-- 取件完成时间 -->
          <el-timeline>
            <span style="margin-left:60px;">预计取件时间:{{ list.estimatedArrivalTime }}</span>
          </el-timeline>
        </div>

      </el-collapse-item>
    </el-collapse>
    <!-- 费用信息 -->
    <el-collapse
      class="pickupInformation"
    >
      <el-collapse-item
        name="1"
        title="费用信息"
        style="margin-top: 10px; "
      >
        <div class="feeInformation">
          <!-- 费用 -->
          <el-timeline>
            费用:
            <span style="color:#ffb302">{{ list.amount }}</span>
          </el-timeline>
          <!-- 支付方式 -->
          <el-timeline>
            <span style="margin-left:145px;">支付方式:{{ list.paymentMethod===1?'预结':'到付' }}</span>
          </el-timeline>
          <!-- 付款状态 -->
          <el-timeline>
            <span style="margin-left:60px;">付款状态:{{ list.paymentStatus===1?'未付':'已付' }}</span>
          </el-timeline>
        </div>

      </el-collapse-item>
    </el-collapse>
    <!-- 货品信息 -->
    <el-collapse
      style="width:1281px; margin:0 auto; margin-top:10px;"
    >
      <el-collapse-item
        title="货品信息"
      >
        <!-- 表格 -->
        <el-table
          style="margin-top:10px"
          :data="tableList"
        >
          <el-table-column
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="货品名称"
          >
          </el-table-column>
          <el-table-column
            v-if="!status"
            prop="goodsType.name"
            label="货品类型"
          >
          </el-table-column>
          <el-table-column
            v-else
            prop="goodsType"
            label="货品类型"
          >
            <el-select
              v-model="eidtList.goodsType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in eidtList"
                :key="item.id"
                :lable="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-table-column>
          <el-table-column
            prop="weight"
            label="重量(kg)"
          >
          </el-table-column>
          <el-table-column
            prop="volume"
            label="体积(立方)"
          >
          </el-table-column>
          <el-table-column>
            <el-button
              type="text"
              @click="edit"
            >编辑</el-button>
            <el-button @click="del">删除</el-button>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
import { carGoList } from '@/api/cargo'
// import showOrderMaps from './components/show-order-maps.vue'
import { goodsTypeCommonList } from '@/api/common'
export default {
  components: {
    // showOrderMaps
  },
  data() {
    return {
      name: 'orderCargodtos',
      id: 0,
      // 用来存储订单详情里的信息
      list: [],
      // 存储货品信息数据
      eidtList: [],
      // table表格数据
      tableList: [],
      // 编辑状态
      status: false
      // 编辑数据渲染

    }
  },
  created() {
    // console.log(this.$route.query.id)
    this.id = this.$route.query.id
    this.orderDetail(this.id)
  },
  methods: {
    async orderDetail(id) {
      const res = await orderDetail(id)
      this.list = res.data
      const rr = await carGoList({ orderId: id })
      // console.log('5555', rr)
      const dd = await goodsTypeCommonList({ orderId: id })
      this.tableList = rr.data
      // console.log(this.tableList)
      // console.log(dd)
      this.eidtList = dd.data
      // console.log('122', this.eidtList)
    },
    // 编辑
    edit() {
      console.log(123)
      this.status = !this.status
    },
    del() {
      this.$message.error('演示数据，不可删除')
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
.list {
  width: 1286px;
  margin: 0 auto;
  margin-top: 20px;
}
.style {
  display: flex;
}
.shipperLeft {
  width: 172px;
  height: 72px;
  margin-top: 5px;
  margin-left: 45px;
  font-size: 14px;
}
.shipperRigth {
  width: 172px;
  height: 72px;
  margin-left: 174px;
}
.basic {
  width: 1286px;
  margin: 0 auto;
}
.shipper {
  margin-top: 44px;
  padding-left: 24px;
}
.shipperImg {
  width: 14px;
  height: 18px;
}
.pickupInformation{
  width: 1281px;
  margin: 0% auto;
}
.pickupInformationTop{
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
.pickupInformationButtom{
display: flex;
margin-left:80px;
margin-top: 20px;
}
.feeInformation{
  display: flex;
// margin-left:80px;
margin-top: 20px;
}
.dashboard-container{
  padding:20px 0px 65px 0px;
}
</style>

